修改邮箱页面布局

新建cms/cms_resetemail.html

{% extends 'cms/cms_base.html' %}{% block title %}修改邮箱-CMS管理系统{% endblock %}{% block page_title %}个人中心>>>修改邮箱{% endblock %}{% block head %}    {% endblock %}{% block main_content %}    
      
      
       
        
        
          
                   
         
          获取验证码
         
        
        
      
       
       
       
        
        
          
                 
        
      
       
      
       
        
        
          
         提交修改        
        
      
       
    
      
{% endblock %}

创建一个视图，编辑cms.views.py

...class ResetEmailView(views.MethodView):    decorators = [login_required]    def get(self):        return render_template('cms/cms_resetemail.html')    def post(self):        passbp.add_url_rule('resetemail', view_func=ResetEmailView.as_view('resetemail'))

修改cms/cms_base.html中的"修改密码" 链接

修改邮箱

完成布局如下

获取验证码

流程：

　　用户输入 新的邮箱，点击 获取验证码，可以通过get方法使用AJAX发送到后台

　　后台接收到用户的新的邮箱，生成6位数的随机验证码，通过flask-mail插件发送验证码到该邮箱

　　把 邮箱作为key,验证码作为value存入memcached中，生存周期为300s(5分钟)

 

首先来配置flask-mail

安装flask-mail

pip install flask-mail

在exts.py中带falsk-mail

...from flask_mail import Mailmail = Mail()

在主程序bbs.py中,把mail和app绑定

...from exts import mailmail.init_app(app)

在config.py配置邮箱的连接和发送者信息，这里我是用的QQ邮箱

#mailMAIL_SERVER = 'smtp.qq.com'MAIL_PORT = '465'MAIL_USE_SSL = True #使用SSL，端口号为465或587MAIL_USERNAME = 'sellsa@qq.com'MAIL_PASSWORD = 'xxxxxxxxx'   #注意，这里的密码不是邮箱密码，而是授权码MAIL_DEFAULT_SENDER = 'sellsa@qq.com'  #默认发送者

 现在来的 cms.views写个视图函数来测试发送邮件

...from exts import mailfrom flask_mail import Message@bp.route('/test_email/')def test_email():    msg = Message('Flask项目测试邮件',  #这是邮件主题                  sender='sellsa@qq.com',                  recipients=['heboan@qq.com'], #发送给谁，这是个列表，可以有多个接收者                  body='Hello, 这是一封测试邮件，这是邮件的正文')    mail.send(msg) #发送    return 'success'

 

 

 配置memecahced

因为我们要把验证码 存到 memcached中，所以这里先配置好它。

我在192.168.88.1服务器中安装memcached并且启动它

 

yum install -y memcachedsystemctl start memcached#查看端口进程[root@c1 ~]# netstat -lntp|grep memcachedtcp        0      0 0.0.0.0:11211           0.0.0.0:*               LISTEN      2904/memcached      tcp6       0      0 :::11211                :::*                    LISTEN      2904/memcached

 

安装python-memecahced插件

pip install python-memcached

我们工具包utils下新建个文件xcache.py对memcached 来封装下

import memcachemc = memcache.Client(["192.168.88.1:11211"], debug=True)def set(key, value, timeout=300):    return mc.set(key=key, val=value, time=timeout)def get(key):    return mc.get(key)def delete(key):    return mc.delete(key)

 

准备工作做好，我们可以写获取验证码的视图了，编辑cms.views.py

...from exts  mailfrom flask_mail import Messagefrom utils xcacheimport string, random@bp.route('/email_captcha/')@login_requireddef email_captcha():    #/cms/emai_capthcha/?email=xxxx@qq.com    email = request.args.get('email')    if not email:        return xjson.json_params_error('请传递邮件参数！')    #生成6位数的随机验证码    source = list(string.ascii_letters)    source.extend(map(lambda x:str(x), range(0,10)))    captcha = ''.join(random.sample(source, 6))    #发送邮件    msg = Message('BBS论坛更换邮箱验证码',                  recipients=[email],                  body='您的验证码：{},5分钟内有效'.format(captcha))    try:        mail.send(msg)    except Exception as err:        print(err)        return xjson.json_server_error(message='邮件发送失败')    #验证码存入memcached    xcache.set(email, captcha)    return xjson.json_success(message='邮件发送成功')

 

AJAX请求，创建static/cms/js/resetemail.js

$(function () {    $('#get_captcha').click(function (event) {        event.preventDefault();        var email = $('input[name=email]').val();        if(!email){            xtalert.alertInfoToast('请输入邮箱');            return;        }        bbsajax.get({            'url': '/cms/email_captcha/',            'data': {                'email': email            },            'success': function (data) {                if (data['code'] === 200){                    xtalert.alertSuccessToast(data['message']);                }else{                    xtalert.alertInfo(data['message']);                }            },            'fail': function (error) {                xtalert.alertNetworkError();            }        })    })});

在cms_resetemail.html中引入resetemail.js

{% block head %}    ...    {
    % endblock %}

 

完成修改邮箱功能

现在就剩下把验证码填上，然后把邮箱和验证码提交到服务器进行验证并做相应的处理，然后返回处理结果到前端就OK了。

需要RestEmailView的post请求，对于用户提交上来的邮箱和验证码，我们需要对它们进行form验证。所以，编辑cms/forms.py，写一个RestEmailForm

...from wtforms.validators import ValidationErrorfrom .models import CMSUserfrom utils import xcacheclass RestEmailForm(BaseForm):    email = StringField(validators=[Email(message='邮箱格式错误'),InputRequired(message='请输入邮箱') ])    captcha = StringField(validators=[Length(min=6, max=6, message='验证码长度错误')])    def validate_email(self, field):        user = CMSUser.query.filter_by(email=field.data).first()        if user:            raise ValidationError('该邮箱已存在')    def validate_captcha(self, field):        email = self.email.data        captcha = field.data        captcha_cache = xcache.get(email)        #判断memcached中是否有对应的邮箱及验证码，小写进行比较，这样用户可以不区分大小写        if  not captcha_cache or captcha.lower() != captcha_cache.lower():            raise ValidationError('邮箱验证码错误')

编辑RestEmailView的post请求

class ResetEmailView(views.MethodView):    decorators = [login_required]    def get(self):        return render_template('cms/cms_resetemail.html')    def post(self):        resetemail_form = RestEmailForm(request.form)        if resetemail_form.validate():            email = resetemail_form.email.data            g.cms_user.email = email            db.session.commit()            return xjson.json_success('邮箱修改成功')        else:            message = resetemail_form.get_error()            return xjson.json_params_error(message)

编辑resetemail.js，再写一个ajax的post请求，当点击"提交修改"，就会触发

//提交修改$(function () {    $('#submit').click(function (event) {        event.preventDefault();        var emailE = $('input[name=email]');        var captchaE = $('input[name=captcha]');        var email = emailE.val();        var captcha = captchaE.val();        bbsajax.post({            'url': '/cms/resetemail/',            'data': {                'email': email,                'captcha': captcha            },            'success': function (data) {                if (data['code'] === 200){                    xtalert.alertSuccessToast(data['message']);                    emailE.val('');                    captchaE.val('');                }else{                    xtalert.alertInfo(data['message']);                }            },            'fail': function (error) {                xtalert.alertNetworkError();            }        })    })});

到此，修改邮箱功能完成